<template>
  <van-tabs v-model:active="activeTab">
    <van-tab title="基本信息" name="base">
      <slot name="base" />
    </van-tab>
    <van-tab title="催缴/沟通" name="reminder">
      <div>
        <van-button v-if="canEdit" type="primary" block @click="openDialog" style="margin-bottom: 12px">新增催缴/沟通</van-button>
        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
          <van-cell-group>
            <van-cell v-for="item in reminderList" :key="item.id" :title="formatReminderType(item.reminderType)" :label="item.reminderContent">
              <template #right-icon>
                <van-button size="mini" v-if="canEdit" @click.stop="editReminder(item)">编辑</van-button>
              </template>
              <div class="desc">{{ item.reminderTime }} | {{ item.nextDueDate ? '下次到期：' + item.nextDueDate : '' }}</div>
            </van-cell>
          </van-cell-group>
        </van-list>
        <van-dialog v-model:show="dialogVisible" :title="editData ? '编辑催缴/沟通' : '新增催缴/沟通'">
          <van-form @submit="submit">
            <van-field v-model="form.reminderType" label="类型" :rules="[{ required: true, message: '请选择类型' }]" is-link readonly @click="showTypePicker = true" />
            <van-popup v-model:show="showTypePicker" position="bottom">
              <van-picker :columns="REMINDER_TYPE_OPTIONS" @confirm="onTypeConfirm" @cancel="showTypePicker = false" />
            </van-popup>
            <van-field v-model="form.reminderContent" label="内容" :rules="[{ required: true, message: '请输入内容' }]" />
            <van-field v-model="form.reminderTime" label="记录时间" type="datetime-local" :rules="[{ required: true, message: '请选择时间' }]" />
            <van-field v-model="form.nextDueDate" label="下次到期日" type="date" />
            <van-field v-model="form.nextAmount" label="下次应缴金额" type="number" />
            <van-field v-model="form.remark" label="备注" />
            <div style="margin: 16px 0;">
              <van-button round block type="primary" native-type="submit">提交</van-button>
            </div>
          </van-form>
        </van-dialog>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { ref, watch, defineProps } from 'vue';
import { showToast } from 'vant';
import { REMINDER_TYPE_OPTIONS, REMINDER_TYPE_MAP } from '@/constants/enums';
import { getReminderRecords, addReminderRecord, updateReminderRecord } from '@/api/propertyFee';

const props = defineProps<{ feeId: number; feeType: number; canEdit: boolean }>();
const activeTab = ref('base');
const reminderList = ref<any[]>([]);
const loading = ref(false);
const finished = ref(false);
const dialogVisible = ref(false);
const editData = ref<any>(null);
const form = ref({
  reminderType: undefined,
  reminderContent: '',
  reminderTime: '',
  nextDueDate: '',
  nextAmount: undefined,
  remark: ''
});
const showTypePicker = ref(false);

function formatReminderType(type: number) {
  return REMINDER_TYPE_MAP[type] || '-';
}
function openDialog() {
  editData.value = null;
  Object.assign(form.value, { reminderType: undefined, reminderContent: '', reminderTime: '', nextDueDate: '', nextAmount: undefined, remark: '' });
  dialogVisible.value = true;
}
function editReminder(item: any) {
  editData.value = item;
  Object.assign(form.value, item);
  dialogVisible.value = true;
}
function onTypeConfirm({ selectedOptions }) {
  form.value.reminderType = selectedOptions[0].value;
  showTypePicker.value = false;
}
async function onLoad() {
  loading.value = true;
  const data = await getReminderRecords(props.feeId, props.feeType);
  reminderList.value = data;
  finished.value = true;
  loading.value = false;
}
async function submit() {
  if (!form.value.reminderType || !form.value.reminderContent || !form.value.reminderTime) {
    showToast('请填写完整信息');
    return;
  }
  if (editData.value) {
    await updateReminderRecord(editData.value.id, { ...form.value, feeId: props.feeId, feeType: props.feeType });
  } else {
    await addReminderRecord({ ...form.value, feeId: props.feeId, feeType: props.feeType });
  }
  dialogVisible.value = false;
  onLoad();
}
</script>

<style scoped>
.desc { color: #888; font-size: 12px; margin-top: 2px; }
</style> 